<template>
  <div class="events">

    <div class="testTxt" @click="clickTxt" ref="testTxt">
      使之能点击到后面的 然后再在这个绝对定位层里面需要接受事件的上面添加
    </div>
    <div class="testImg" @click="clickImg" ref="testImg">
      <!--<img src="../../static/images/default.png" alt="">-->
    </div>

    <template v-for="data in haiBaiList">
      <div class="item" @click="itemClick(data)" v-if="data.type==='text'">

      </div>
      <div class="item" @click="itemClick(data)" v-if="data.type==='text'">

      </div>
    </template>


    <div class="btn">

      <button @click="txtAll()">编辑文字</button>
      <button @click="imgAll()">编辑图片</button>
    </div>

  </div>
</template>

<script>
  export default {
    name: "test-events",
    data() {
      return {

        haiBaiList: [
          {
            name: 'item1',
            type: 'text',
            text: '26'
          },
          {
            name: 'item2',
            type: 'image',
            backImage: 'url("../../static/images/default.png")'
          }
        ]
      }
    },
    methods: {
      clickTxt: function () {
        console.log("txt");
      },

      clickImg: function () {

        console.log("img");
      },
      txtAll: function () {
        this.$refs.testTxt.style.pointerEvents = "auto";
      },
      imgAll: function () {
        this.$refs.testTxt.style.pointerEvents = "none";
      },

      itemClick: function (data) {


      }

    },
    created: function () {

    }

  }
</script>

<style lang="scss" scoped>
  .events {
    width: 100%;
    height: 100%;
    .testTxt {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      z-index: 100;
      overflow: hidden;
      pointer-events: auto;
    }
    .testImg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      z-index: 10;
      background-image: url("../../static/images/default.png");
      background-size: 100% 100%;
      pointer-events: auto;
    }

    .btn {
      margin-top: 200px;
    }
  }
</style>
